<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="学生心理健康服务平台">
				<view slot="center" class="navTitle">
					学生心理健康服务平台
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView">
				<view class="loginBox">
					<view class="form">
						<view class="ft">
							学生注册账号
						</view>
						<view class="line">
							<view class="in">
								<input type="text" placeholder="请输入学生真实姓名" v-model="form.nickname" />
							</view>
						</view>
						<view class="line" @click="toSelectSchool">
							<view class="in">
								<input type="text" disabled placeholder="请选择学生所在学校" v-model="form.schoolIdName" />
							</view>
						</view>
						<view class="line" @click="toSelectGrade">
							<view class="in">
								<input type="text" disabled placeholder="请输入学生所在年级" v-model="form.gradeIdName" />
							</view>
						</view>
						<view class="line" @click="toSelectClass">
							<view class="in">
								<input type="text" disabled placeholder="请输入学生所在班级" v-model="form.classesIdName" />
							</view>
						</view>
						<view class="line">
							<view class="in">
								<input type="text" placeholder="请输入学生学籍号" v-model="form.studentNo" />
							</view>
						</view>
						<view class="line">
							<view class="in">
								<input :type="showPwd?'text':'password'" placeholder="请输入密码" v-model="form.password" />
							</view>
							<view class="btn" @tap="showPwd=!showPwd">
								<view class="ic" v-show="showPwd">
									<image src="@/static/images/icon-eye-close.png" mode="widthFix"></image>
								</view>
								<view class="ic" v-show="!showPwd">
									<image src="@/static/images/icon-eye-open.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="line">
							<view class="in">
								<input :type="showPwd2?'text':'password'" placeholder="请再次输入密码"
									v-model="form.confirmPassword" />
							</view>
							<view class="btn" @tap="showPwd2=!showPwd2">
								<view class="ic" v-show="showPwd2">
									<image src="@/static/images/icon-eye-close.png" mode="widthFix"></image>
								</view>
								<view class="ic" v-show="!showPwd2">
									<image src="@/static/images/icon-eye-open.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="iaggree">
							<view class="icheck" :class="isAggree?'checked':''" @tap="isAggree=!isAggree">
								<image src="@/static/images/icon-gou.png" mode="aspectFit"></image>
							</view>
							<view class="p">
								我已阅读 <navigator url="" open-type="navigate" class="a">《用户协议》</navigator> 和 <navigator
									url="" open-type="" class="a">《隐私政策》</navigator>
							</view>
						</view>
						<view class="lineBtns">
							<view class="btn act" @tap="submit">
								注册
							</view>
						</view>
						<view class="other">
							<view class="l"></view>
							<view class="r">
								已有账号！ <navigator url="/subpage/student/login/login" class="a" open-type="navigate">去登录
								</navigator>
							</view>
						</view>
					</view>
					<view class="footTip">
						<view class="utip">
							<text>如遇登录问题请点击</text>
							<button type="default" open-type="contact" class="lineNav">联系客服</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-picker @cancel="pickerShow=false" :show="pickerShow" :columns="pickerList" keyName="name" @confirm="confirmPicker"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPwd: false,
				showPwd2: false,
				isAggree: false,
				schoolList: [],
				gradeList:[],
				classList:[],
				curFiled: 'schoolId',
				pickerList: [
					[]
				],
				pickerShow: false,
				form: {
					nickname: '庄',
					schoolId: '102',
					schoolIdName: '',
					gradeId: '272',
					gradeIdName: '',
					classesId: '272',
					classesIdName: '',
					studentNo: '123',
					password: '111111',
					confirmPassword: '111111',
					userType:1
				}
			}
		},
		onLoad(e) {
			if(e.type){
				this.form.userType=e.type
			}
			this.getSchool()
		},
		methods: {

			getSchool() {

				this.$api.schoolList({}, res => {
					if (res.code == 200) {
						this.schoolList = res.data
					}
				})

			},
			getGrade() {

				this.$api.gradeList({deptId:this.form.schoolId}, res => {
					if (res.code == 200) {
						this.gradeList = res.data
					}
				})

			},
			getClass() {

				this.$api.classesList({gradeId:this.form.gradeId}, res => {
					if (res.code == 200) {
						this.classList = res.data
					}
				})

			},
			
			toSelectSchool(){
				this.curFiled='schoolId'
				this.pickerList = [this.schoolList]
				this.pickerShow=true
			},
			toSelectGrade() {
				if (!this.form.schoolId) {

					this.$refs.uToast.show({
						message: '请先选择所在学校！',
						type: 'warning',
						position: "top"
					});
					return;
				}
				this.curFiled='gradeId'
				this.pickerList = [this.gradeList]
				this.pickerShow=true
			},
			toSelectClass() {
				if (!this.form.gradeId) {
					this.$refs.uToast.show({
						message: '请先选择所在年级！',
						type: 'warning',
						position: "top"
					});
					return;
				}
				this.curFiled='classesId'
				this.pickerList = [this.classList]
				this.pickerShow=true
			},
			confirmPicker(e) {
				let item = e.value[0]
				this.form[this.curFiled] = item.id
				this.form[this.curFiled + 'Name'] = item.name
				this.pickerShow = false
				if(this.curFiled=='schoolId'){
					this.form.gradeId=''
					this.form.gradeName=''
					this.form.classesId=''
					this.form.classesIdName=''
					this.getGrade()
				}
				if(this.curFiled=='gradeId'){
					this.form.classesId=''
					this.form.classesIdName=''
					this.getClass()
				}
			},
			submit() {
				const that = this;
				if (!that.form.nickname) {
					that.$refs.uToast.show({
						message: '请输入学生真实姓名！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (!that.form.schoolId) {
					that.$refs.uToast.show({
						message: '请选择学生所在学校！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (!that.form.gradeId) {
					that.$refs.uToast.show({
						message: '请输入学生所在年级！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (!that.form.classesId) {
					that.$refs.uToast.show({
						message: '请输入学生所在班级！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (!that.form.studentNo) {
					that.$refs.uToast.show({
						message: '请输入学生学籍号！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (!that.form.password) {
					that.$refs.uToast.show({
						message: '请输入密码！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (!that.form.confirmPassword) {
					that.$refs.uToast.show({
						message: '请再次输入密码！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (that.form.password != that.form.confirmPassword) {
					that.$refs.uToast.show({
						message: '两次密码输入不一致！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				this.$api.verifyRegister(this.form, res => {
					if (res.code == 200) {
						this.dataInfo = res.data
						this.$db.set('userToken',res.data.token)
						if(res.data.schoolList && res.data.schoolList.length>0){
							
							this.$db.set('deptId',res.data.schoolList[0].id)
							this.$db.set('schoolList',res.data.schoolList)
						}
						uni.reLaunch({
							url:'/pages/home/home'
						})
					}else{
						this.$refs.uToast.show({
							message: res.message,
							type: 'warning',
							position: "top"
						});
					}
				})
				//ajax
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginBox {
		min-height: 100%;
		display: flex;
		padding: 40rpx 70rpx 60rpx;
		box-sizing: border-box;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;

		.form {
			width: 100%;
			flex: 1 1 auto;
			padding-bottom: 40rpx;

			.ft {
				text-align: center;
				font-size: 36rpx;
				color: #65554d;
				margin-bottom: 40rpx;
			}

			.line {
				display: flex;
				margin-bottom: 24rpx;
				background: #fff;
				height: 90rpx;
				align-items: center;
				border-radius: 90rpx;

				.ico {
					flex: 0 0 auto;
					width: 80rpx;
					text-align: center;

					image {
						width: 24rpx;
						height: auto;
						display: block;
						margin: auto;
					}
				}

				.in {
					flex: 1 1 auto;
					overflow: hidden;

					input {
						width: 100%;
						height: 90rpx;
						display: block;
						font-size: 24rpx;
						background: none !important;
						border: none !important;
						outline: none !important;
						padding: 0 30rpx;
						box-sizing: border-box;
					}
				}

				.btn {
					flex: 0 0 auto;
					width: 100rpx;
					text-align: center;

					image {
						width: 40rpx;
						display: block;
						margin: auto;
						height: auto;
					}
				}
			}

			.lineBtns {
				margin-top: 80rpx;

				.btn {
					display: block;
					line-height: 88rpx;
					border: 1rpx solid #65554d;
					border-radius: 90rpx;
					text-align: center;
					font-size: 28rpx;
					margin-bottom: 10rpx;

					&.act {
						border-color: #fe9c29;
						background: #fe9c29;
						color: #fff;
					}
				}
			}

			.other {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #897f7a;

				navigator {
					display: inline;
					padding: 0 !important;
					margin: 0 !important;
					border: none !important;
					opacity: 1 !important;
					outline: none !important;
					background: transparent !important;
					line-height: inherit;
					overflow: visible;
					height: auto !important;
					font-size: inherit !important;

					&.a {
						color: #fe9c29;
						text-decoration: underline;
						margin-left: 10rpx !important;
					}
				}
			}
		}
	}
</style>